<template>
  <div class="item-config">
    <el-form
      :model="ninjaOneConfigForm"
      label-position="top"
       label-width="100px"
      ref="ninjaone-form"
      :rules="ninjaOneConfigRules"
    >
      <el-form-item :label="$t('custom.connector.ninjaone.interninjaoneapisitesite')" prop="site">
        <el-select v-model="ninjaOneConfigForm.site">
          <el-option
            v-for="item in siteOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('custom.connector.ninjaone.ninjaoneapisite')" prop="clientId">
        <el-input
          v-model="ninjaOneConfigForm.clientId"
          :placeholder="$t('custom.connector.ninjaone.interninjaoneapisite')"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.connector.ninjaone.ninjaoneapiaccessToken')" prop="clientSecret">
        <el-input
          v-model="ninjaOneConfigForm.clientSecret"
          :type="SecretKeyCheck?'text':'password'"
          :placeholder="$t('custom.connector.ninjaone.interninjaoneapiaccessToken')">
           <i slot="suffix" :class="SecretKeyCheck?'cuifont icon_eye_show':'cuifont icon_eye_hide'"
                      @click="SecretKeyCheck=!SecretKeyCheck"></i>
          </el-input>
      </el-form-item>
      <el-form-item>
        <!-- <el-button
          style="width:100px;"
          size="small"
          @click="cancelThisConfig"
          >{{ $t('cancel') }}</el-button
        > -->
        <el-button
          type="primary"
          :loading="testLoading"
          style="width:165px;margin-top: 6px;"
          size="small"
          @click="startTestConfig"
          >{{ $t('custom.connector.savequickbookspath') }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { Component } from './modules/Component.js'
import Trail from '@/components/storybook/mixins/trail'

export default {
  mixins: [Trail],

  props: {
    ninjaOneConfigForm: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  data () {
    return {
      SecretKeyCheck: false,
      ninjaOneConfigRules: {
        site: [
          {
            required: true,
            message: this.$t('custom.connector.ninjaone.interninjaoneapisite'),
            trigger: 'blur',
            pattern: '[^ \x22]+'
          }
        ],
        clientId: [
          {
            required: true,
            message: this.$t('custom.connector.ninjaone.interninjaoneapisite'),
            trigger: 'blur',
            pattern: '[^ \x22]+'
          }
        ],
        clientSecret: [
          {
            required: true,
            message: this.$t('custom.connector.ninjaone.interninjaoneapiaccessToken'),
            trigger: 'blur',
            pattern: '[^ \x22]+'
          }
        ]
      },
      testLoading: false,
      options: [{
        value: 'https://ninjaone.us/',
        label: 'US'
      },
      {
        value: 'https://ninjaone.ca/',
        label: 'CAC (Canada)'
      },
      {
        value: 'https://ninjaone-de.com/',
        label: 'EUC (Europe-Central)'
      },
      {
        value: 'https://ninjaone-ie.com/',
        label: 'EUW (Europe-West)'
      },
      {
        value: 'https://ninjaone.uk/',
        label: 'UK (London)'
      },
      {
        value: 'https://ninjaone.jp/',
        label: 'Japan (Tokyo)'
      },
      {
        value: 'https://ninjaone-br.com/',
        label: 'SAE (South-America)'
      },
      {
        value: 'https://ninjaone-au.com/',
        label: 'Australia (Sydney)'
      }
      ],
      siteOptions: [
        { label: 'app.ninjarmm.com', value: 'app.ninjarmm.com' },
        { label: 'eu.ninjarmm.com', value: 'eu.ninjarmm.com' },
        { label: 'oc.ninjarmm.com', value: 'oc.ninjarmm.com' }
      ]
    }
  },
  created () {

  },
  methods: {
    cancelThisConfig () {
      this.ninjaOneConfigForm = {
        site: this.siteOptions[0],
        clientId: null,
        clientSecret: null
      }
    },
    // startTestConfig () {
    //   this.validateConfigForm().then(() => {
    //     this.testLoading = true
    //     const params = {
    //       ...this.ninjaOneConfigForm,
    //       tenantId: this.$store.state.user.tenantCode,
    //       subjectCode: 'NINJAONE'
    //     }
    //     this.$interface.taskManager
    //       .postClientData(params)
    //       .then(({ data: res }) => {
    //         if (res.code !== 0) {
    //           this.testLoading = false
    //           Component.$emit('getConnectorConfig')
    //           return this.$message.error(res.msg)
    //         }
    //         this.testLoading = false
    //         this.synctdData()
    //         // this.$message.success(res.msg)
    //         this.goToPage()
    //       }).catch(() => {
    //         this.testLoading = false
    //       })
    //   })
    // },

    startTestConfig () {
      this.validateConfigForm().then(() => {
        this.testLoading = true
        const params = {
          ...this.ninjaOneConfigForm,
          tenantId: this.$store.state.user.tenantCode,
          subjectCode: 'NINJAONE'
        }
        this.$interface.taskManager
          .postClientData(params)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              this.testLoading = false
              Component.$emit('getConnectorConfig')
              return this.$message.error(res.msg)
            }
            this.testLoading = false
            this.synctdData()
            return this.$message.success(res.msg)
          }).catch(() => {
            this.testLoading = false
          })
      })
    },
    // goToPage () {
    //   let clientID = this.ninjaOneConfigForm.clientId
    //   let url = window.location.origin
    //   let authUrl = ''
    //   if (window.location.hostname === 'app.maibozhineng.com') {
    //     authUrl = 'https://app.ninjarmm.com/ws/oauth/authorize?response_type=code'
    //   } else {
    //     authUrl = 'https://app.ninjarmm.com/ws/oauth/authorize?response_type=code'
    //   }
    //   // https://app.ninjarmm.com/ws/oauth/authorize?response_type=code&client_id=11&
    //   // redirect_uri=https://appint.mspbots.ai/web/task-management/ninjaone/redirect&state=custom_state&scope=monitoring
    //   const smilebackAuthURL = authUrl +
    //       '&client_id=' + clientID +
    //       '&redirect_uri=' + url + '/web/task-management/ninjaone/redirect' +
    //       '&state=' + this.$store.state.user.tenantCode + '_' + this.$store.state.user.id +
    //       '&scope=monitoring'
    //   window.open(smilebackAuthURL, '_blank')
    // },
    validateConfigForm () {
      return this.$refs['ninjaone-form'].validate()
    },
    synctdData (itemInfo) {
      const params = {
        tenantId: this.$store.state.user.tenantCode,
        subjectCode: 'NINJAONE'
      }
      this.$interface.taskManager.syncClientData(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }

        if (itemInfo && res.data && res.data.sync) {
          itemInfo.sync.lastTime = res.data.sync.lastTime
          itemInfo.sync.status = res.data.sync.status
        }
        Component.$emit('getConnectorConfig')
        // return this.$message.success(res.msg)
      }).catch(() => {
      })
    },
    detail () {

    }
  }
}
</script>

<style scoped lang="scss">
  ::v-deep .el-scrollbar__wrap{
    height:180px !important;
  }

.item-config ::v-deep .el-select {
  width: 100% !important;
}
</style>
